<template>
    <div class="utable" ref="utable" style="height: 100%">
        <el-table
            ref="multipleTable"
            v-bind="$attrs"
            v-loading="loading"
            :element-loading-text="elementLoadingText"
            :element-loading-spinner="elementLoadingSpinner"
            :element-loading-background="elementLoadingBackground"
            :key="key"
            :data="tableData"
            :border="showBorder"
            class="u-table"
            :height="height || '100%'"
            row-key="id"
            :size="size"
            :max-height="maxHeight || 'calc(100% - 40px)'"
            :header-row-class-name="headerRowClassName"
            :show-summary="showSummary"
            :sum-text="sumText"
            :summary-method="summaryMethod"
            :span-method="spanMethod"
            :highlight-current-row="highlightCurrentRow"
            :row-class-name="rowClassName"
            :cell-class-name="cellClassName"
            :show-header="showHeader"
            :fit="fit"
            empty-text=""
        >
            <el-table-column
                type="selection"
                width="55"
                :reserve-selection="true"
                :selectable="selectable"
                :fixed="selectionFixed"
                v-if="selection"
            ></el-table-column>
            <el-table-column
                type="index"
                :label="indexText"
                :fixed="indexFixed"
                width="60"
                v-if="showIndex"
            >
            </el-table-column>
            <template v-for="(col, colIndex) in tableColumn">
                <template v-if="col.tableColumnSlot">
                    <slot :name="col.tableColumnSlot"></slot>
                </template>
                <el-table-column
                    :prop="col.prop"
                    :label="col.label"
                    :min-width="col.minWidth"
                    :width="col.width"
                    :header-align="col.headerAlign"
                    :align="col.align"
                    :class-name="col.className"
                    :label-class-name="col.labelClassName"
                    v-else-if="!col.hidden"
                    :sortable="col.sortable"
                    :sort-method="col.sortMethod"
                    :sort-by="col.sortBy"
                    :sort-orders="col.sortOrders"
                    :formatter="col.formatter"
                    :resizable="
                        typeof col.resizable == 'boolean' ? col.resizable : true
                    "
                    :show-overflow-tooltip="
                        typeof col.showOverflowTooltip == 'boolean'
                            ? col.showOverflowTooltip
                            : true
                    "
                    :fixed="col.fixed"
                    :filters="col.filters"
                    :filter-placement="col.filterPlacement"
                    :filter-multiple="col.filterMultiple"
                    :filter-method="col.filterMethod"
                    :filtered-value="col.filteredValue"
                    :column-key="col.columnKey"
                >
                    <template #header="scope">
                        <template v-if="col.renderHeader">
                            <MetaRender
                                :renderDom="
                                    (h) => {
                                        return col.renderHeader(h, scope)
                                    }
                                "
                            ></MetaRender>
                        </template>
                        <template v-else-if="col.slotHeader">
                            <slot
                                :name="col.slotHeader"
                                :column="scope.column"
                                :index="scope.$index"
                            ></slot>
                        </template>
                        <template v-else>
                            <span>{{ col.label }}</span>
                        </template>
                    </template>

                    <template #default="scope">
                        <template v-if="col.render">
                            <MetaRender
                                :renderDom="
                                    (h) => {
                                        return col.render(h, scope)
                                    }
                                "
                            ></MetaRender>
                        </template>
                        <template v-else-if="col.slot">
                            <slot
                                :name="col.slot"
                                :row="scope.row"
                                :column="scope.column"
                                :index="scope.$index"
                            ></slot>
                        </template>
                        <template v-else>
                            <el-tooltip
                                v-if="['el-2', 'el-3'].includes(col.className)"
                                effect="dark"
                                :content="scope.row[col.prop]"
                                placement="top-start"
                            >
                                <span>{{ scope.row[col.prop] }}</span>
                            </el-tooltip>
                            <span v-else>{{ scope.row[col.prop] }}</span>
                        </template>
                    </template>
                </el-table-column>
            </template>
            <span class="clear"></span>
            <template #empty>
                <JrEmpty
                    v-if="isFetchedTable"
                    style="padding: 30px 0"
                    :text="emptyContent.text"
                    :image="emptyContent.image"
                    :max-width="emptyContent.maxWidth"
                ></JrEmpty>
            </template>
        </el-table>

        <el-row
            v-if="showPagination && total > 0 && total > pageSizes[0]"
            type="flex"
            :justify="
                paginationAlign == 'center'
                    ? 'center'
                    : paginationAlign == 'left'
                    ? 'start'
                    : 'end'
            "
            style="text-align: center; margin: 15px"
        >
            <el-pagination
                class="page-list-pagination"
                :size="pageSize || size"
                :background="needBackground"
                :layout="pageLayout"
                :currentPage.sync="formData.PageIndex"
                :page-size="formData.PageSize"
                :page-sizes="pageSizes"
                :pager-count="pageCount"
                :total="total"
                :disabled="loading"
                @size-change="handlePageSizeChange"
                @current-change="handlepageIndexChange"
            >
            </el-pagination>
        </el-row>
        <div class="clear"></div>
    </div>
</template>

<script>
import MetaRender from '@/components/MetaTable/MetaRender.vue'
import JrEmpty from '@/components/MetaTable/JrEmpty.vue'
import { loadingSvg } from '@/common/index.js'

export default {
    components: {
        JrEmpty,
        MetaRender
    },
    props: {
        formData: {
            type: Object,
            default: () => {
                return {
                    PageIndex: 1,
                    PageSize: 20
                }
            }
        },
        loading: {
            type: Boolean,
            default: false
        },
        elementLoadingText: {
            type: String,
            default: '加载中'
        },
        elementLoadingSpinner: {
            type: String,
            default: loadingSvg
        },
        elementLoadingBackground: {
            type: String,
            default: 'rgba(255, 255, 255, 0.6)'
        },
        getList: {
            type: Function,
            default: () => {}
        },
        emptyContent: {
            type: Object,
            default: () => {
                return {
                    text: undefined,
                    image: undefined,
                    maxWidth: undefined
                }
            }
        },
        isFetchedTable: {
            type: Boolean,
            default: false
        },
        showPagination: {
            type: Boolean,
            default: true
        },
        showBorder: {
            type: Boolean,
            default: true
        },
        showIndex: {
            type: Boolean,
            default: false
        },
        indexText: {
            type: String,
            default: '序号'
        },
        selection: {
            type: Boolean,
            default: false
        },
        tableData: {
            type: Array,
            default: () => []
        },
        height: {
            type: [Number, String, null],
            default: null
        },
        maxHeight: {
            type: [Number, String, null],
            default: null
        },
        size: {
            type: String,
            default: 'default'
        },
        total: {
            type: Number,
            default: 0
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [10, 20, 30, 50]
            }
        },
        showSummary: {
            type: Boolean,
            default: false
        },
        showHeader: {
            type: Boolean,
            default: true
        },
        fit: {
            type: Boolean,
            default: true
        },
        sumText: {
            type: String,
            default: '合计'
        },
        summaryMethod: {
            type: Function,
            default: () => {}
        },
        spanMethod: {
            type: Function,
            default: () => {}
        },
        highlightCurrentRow: {
            type: Boolean,
            default: true
        },
        rowClassName: {
            type: [Function, String],
            default: () => {}
        },
        cellClassName: {
            type: [Function, String],
            default: () => {}
        },
        tableColumn: {
            /*
             * tableColumn:[
             *   {
             *       label: String,
             *       prop: String,
             *       width: Number,
             *       minWidth: Number,
             *       headerAlign: String,
             *       align：String,
             *       fixed: String,
             *       showOverflowTooltip: Boolean,
             *       hidden: Boolean,
             *       sortable: Boolean,
             *       render: Function,
             *       slot: String,
             *       slotHeader: String,
             *   }
             * ]
             * */
            type: Array,
            default: () => []
        },
        paginationAlign: {
            type: String,
            default: 'end'
        },
        clearSelection: {
            type: Boolean,
            default: false
        },
        toggleRowSelection: {
            type: Array,
            default: () => []
        },
        selectable: {
            type: Function,
            default: () => true
        },
        selectionFixed: {
            type: [String, Boolean],
            default: 'left'
        },
        indexFixed: {
            type: [String, Boolean],
            default: 'left'
        },
        headerRowClassName: {
            type: String,
            default: 'header-bg-class'
        },
        pageLayout: {
            type: String,
            default: 'total,sizes,prev,pager,next,jumper'
        },
        pageSize: {
            type: String,
            default: 'small'
        },
        needBackground: {
            type: Boolean,
            default: true
        },
        pageCount: {
            type: Number,
            default: 5
        }
    },
    watch: {
        tableColumn() {
            this.$nextTick(() => {
                this.key = Math.random()
            })
        },
        // 手动清空选项
        clearSelection(val) {
            if (val) {
                this.$refs.multipleTable.clearSelection()
            }
        },
        // 主动勾选行, 数组内包含需要勾选的项row
        toggleRowSelection: {
            handler(val) {
                if (val && val.length) {
                    val.forEach((i) => {
                        this.$refs.multipleTable.toggleRowSelection(i, true)
                    })
                }
            },
            deep: true
        }
    },
    data() {
        return {
            key: Math.random(),
            time: 0
        }
    },
    updated() {},
    mounted() {},
    methods: {
        handlePageSizeChange(val) {
            this.formData.PageSize = val
            this.formData.PageIndex = 1
            this.getList()
        },

        handlepageIndexChange(val) {
            this.formData.PageIndex = val
            this.getList()
        }
    }
}
</script>

<style></style>
